<template>
  <div class="container">
    <!-- 顶部模块 -->
    <header>
      <div class="top">
        <div class="left">
          <ul>
            <li><a href="">小米商城</a></li>
            <li>|</li>
            <li><a href="">MIUI</a></li>
            <li>|</li>
            <li><a href="">loT</a></li>
            <li>|</li>
            <li><a href="">云服务</a></li>
            <li>|</li>
            <li><a href="">天星数科</a></li>
            <li>|</li>
            <li><a href="">有品</a></li>
            <li>|</li>
            <li><a href="">小爱开放平台</a></li>
            <li>|</li>
            <li><a href="">企业团购</a></li>
            <li>|</li>
            <li><a href="">资源证照</a></li>
            <li>|</li>
            <li><a href="">协议规则</a></li>
            <li>|</li>
            <li><a href="">下载app</a></li>
            <li>|</li>
            <li><a href="">智能生活</a></li>
            <li>|</li>
            <li><a href="">Select Location</a></li>
          </ul>
        </div>
        <div class="right">
          <div class="gouwuche" @click="toCart">购物车({{ totalCount }})</div>
          <div class="rightbox">
            <ul>
              <!-- 用户名 -->
              <li>
                <a v-show="name">{{ name }}</a>
              </li>
              <!-- 退出 -->
              <li v-show="name">|</li>
              <li>
                <a href="" v-show="name" @click.prevent="loginOut">退出</a>
              </li>
              <li>|</li>
              <li>
                <a href="" @click.prevent="goLogin" v-show="!name">登录</a>
              </li>
              <li v-show="!name">|</li>
              <li>
                <a href="" @click.prevent="goRegister" v-show="!name">注册</a>
              </li>
              <li>
                <a href="" @click.prevent="goOrderCenter" v-show="name"
                  >订单中心</a
                >
              </li>

              <li>|</li>
              <li><a href="">消息通知</a></li>
            </ul>
          </div>
        </div>
      </div>
    </header>
  </div>
</template>


<script>
import { getLoginOut, getUserInfo, getMyInfo } from "../assets/js/request.js";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      CartNumList: [],
    };
  },
  created() {
    let token = sessionStorage.getItem("token");
    if (token) {
      getUserInfo().then((res) => {
        this.userId = res.id;

        this.CartNumInfo();
      });
    }
  },
  computed: {
    ...mapState(["name"]),
    totalCount() {
      let token = sessionStorage.getItem("token");
      if (token) {
        let count = 0;
        this.CartNumList.forEach((ele) => {
          count += ele.num;
        });
        return count;
      }
    },
  },
  methods: {
    ...mapActions(["SaveUsername"]),

    //获取登录信息
    goRegister() {
      this.$router.push({
        path: "/register",
      });
    },
    goLogin() {
      this.$router.push({
        path: "/login",
      });
    },
    loginOut() {
      getLoginOut().then(() => {
        alert("退出成功");
        sessionStorage.removeItem("token");
        this.SaveUsername("");
      });
    },
    toCart() {
      let token = sessionStorage.getItem("token");
      if (token) {
        let id = this.$route.params.id;
        getAddCart({
          goods_id: id,
          num: 1,
          project_id: 7,
        }).then((res) => {
          console.log(res);
          this.$router.push(`/cart`);
        });
      } else {
        alert("请先登录账号");
        this.$router.push(`/login`);
      }
    },
    goOrderCenter() {
      this.$router.push({
        path: "/orderCenter",
      });
    },
    async CartNumInfo() {
      let res = await getMyInfo();

      this.CartNumList = res.filter((ele) => ele.user_id == this.userId);
    },
  },
};
</script>

<style lang="scss" >
@import "../assets/scss/config.scss";
@import "../assets/scss/reset.scss";
header {
  width: 100%;
  height: 40px;
  background: #333;
  .top {
    width: 1226px;
    height: 40px;
    line-height: 40px;
    margin-left: 100px;
    .left ul li {
      float: left;
      font-size: 12px;
      color: #ccc;
    }
    .left ul li a {
      display: block;
      padding: 0 8px;
      font-size: 12px;
      color: #b0b0b0;
    }
    .left ul li a:hover {
      color: #fff;
    }
    .right {
      float: right;
    }
    .rightbox {
      float: right;
    }
    .right ul li {
      float: left;
      font-size: 12px;
      color: #ccc;
    }
    .right ul li a {
      display: block;
      padding: 0 8px;
      font-size: 12px;
      color: #b0b0b0;
    }
    .right ul li a:hover {
      color: white;
    }
    .right .gouwuche a {
      color: #fff;
    }
    .right .gouwuche {
      margin: 0 20px;
      background: #424242;
      width: 120px;
      text-align: center;
      font-size: 12px;
      cursor: pointer;
      background: rgb(102, 102, 102);
      color: #fff;
      float: right;
    }
    .right .gouwuche:hover {
      color: #000;
      background: #ff6700;
    }
    .clear {
      clear: both;
    }
  }
}
</style>